<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<title>我的订单</title>
		<link rel="stylesheet" href="/static/css/style.css" />

	</head>

	<body>
		<div class="container" id="bill" style="padding-top: 48px;" v-cloak>
			<div class="tab tab-bill">
				<div class="menu">
					<li :class="tabIndex === 0?'active':''" @click="tabChange(0)">
						<a>自己</a>
					</li>
					<li :class="tabIndex === 1?'active':''" @click="tabChange(1)">
						<a>团队</a>
					</li>
				</div>
			</div>
			
			<div class="blank" v-show="orderList.length == 0">
				<span class="icon icon-noitem"></span>
				<h3>没有查询到记录</h3>
			</div>
				<div class="scroll-wrapper" id="pullrefresh" style="top:48px" v-show="orderList.length > 0">

			<div class="scroll">
					<div class="list list-order">

						<li v-for="(item,index) in orderList">
							<a>
								订单编号：<span>${item.order_sn}</span> <br /> 付款时间：
								<span>${item.create_time}</span><br /> 获得慧币：
								<em v-if="tabIndex == 0">+${item.buyer_commission}</em><em v-else>+${item.recommend_commission}</em><br /> 订单状态：

								<span>${item.order_status | status}</span>
							</a>
						</li>

					</div>
</div>

			</div>

		</div>

	</body>
	<script src="/static/js/mui.min.js"></script>
	<script src="/static/js/vue.min.js"></script>
	<script src="/static/js/zepto.min.js"></script>
	<script src="/static/js/plugins/popup.js"></script>
	<script src="/static/js/plugins/scroll.js"></script>
	<script src="/static/js/plugins/pullrefresh.js"></script>
	<script type="text/javascript">
		var bill = new Vue({
			el: '#bill',
			delimiters: ['${', '}'],
			data: {
				tabIndex: 0,
				orderList: [],
				pageNum: 1,
				pageSize: 15,
				pages: 1,
				count: 0,
				canPullUp: true
			},
			mounted: function() {
				this.request();
				mui('#pullrefresh').pullRefresh({
					up: {
						contentrefresh: '正在加载...',
						callback: this.pullupRefresh
					}
				});
			},

			methods: {
				doBack() {

				},
				tabChange(index) {

					this.tabIndex = index;
					this.pageNum = 1;
					this.count = 0;
					if(mui('#pullrefresh').pullRefresh()){
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
					};
					
					this.request();

				},
				request() {
					var self = this;

					$.post('/app/wxmp/user/order', {
						index: this.tabIndex,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}, function(res) {
						if(!self.canPullUp && self.count == 0) {
							mui('#pullrefresh').pullRefresh().refresh(true);
						}
						if(res.errno == 0) {
							console.log(res);
							if(self.pageNum == 1) {
								self.orderList = res.data.data;
							} else {
								self.orderList = self.orderList.concat(res.data.data);
							}
							
							self.pageNum++;
							self.pages = res.data.totalPages;
							

						} else {
							popup.prompt(res.errmsg);
						}
					});

				},
				pullupRefresh() {
					var self = this;

					self.count++;
					if(self.count >= self.pages) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						self.canPullUp = false;
					} else {
						setTimeout(function() {

							self.request();
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();

						}, 1500);
					}

				}
				

			},
			filters:{
				formatTime(time) {
					var date = new Date(time);
					Y = date.getFullYear() + '-';
					M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					return Y + M + D + h + m + s;
				},
				status(str) {
				var txt;
				switch(str) {
					case "12":
						txt = "已付款";
						break;
					case "3":
						txt = "已结算";
						break;
					case "13":
						txt = "已取消";
						break;
					default:
						break;
				}
				return txt;
			},
			}

		});
	</script>

</html>